<template>
	<scroll-view :scroll-y="true" class="scroll" @scrolltolower="page">
		<template v-for="item in list">
			<view v-if="(item.type && item.type == 3) || info.index == 3" class="list">
				<view class="flex between store-title font24">
					<view class="flex start font24">
						<i class="iconfont icon-store font24" style="height: 24rpx;"></i>
						<view>{{item.storeName}}</view>
					</view>
					<view class="flex">
						<view>距结束:</view>
						<view class="flex center font20">
							<view class="flex center time-red-box font16">00</view>
							<view>时</view>
							<view class="flex center time-red-box font16">00</view>
							<view>分</view>
							<view class="flex center time-red-box font16">00</view>
							<view>秒</view>
						</view>
					</view>
				</view>
				<view v-for="product in item.products" :key="product.id" class="flex">
					<image :src="product.image"></image>
					<view class="flex column between start store-info">
						<view class="flex start">
							<!-- <view class="tag font20">自营</view> -->
							<view class="font28 fontbold-500">{{product.title}}</view>
						</view>
						<view class="flex between font20 num">
							<view class="flex price">
								<text class="font28">￥</text>
								<text class="font36">{{product.price.split('.')[0]}}</text>
								<text class="font28">.{{product.price.split('.')[1]}}</text>
								<text class="font20">￥{{product.original_price}}</text>
							</view>
							<view class="sale-num font24">已售{{product.sale_count}}</view>
						</view>
						<view class="flex start font20 qiang-box" style="width: 100%;">
							<image :src="IMAGE_URL + '/static/mine/miaoshabg.png'" style="width: 100%;height: 100%;">
							</image>
							<view class="flex between" style="width: 100%;">
								<view class="flex between progress">
									<view class="progress-bottom">
										<view class="progress-active" :style="{width: '30%'}"></view>
									</view>
									<view class="font16">已抢74%</view>
								</view>
								<view class="font32 fontbold-500 qiang-txt">抢</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="(item.type && item.type == 2) || info.index == 2" class="list">
				<view class="flex start store-title font24">
					<i class="iconfont icon-store font24" style="height: 24rpx;"></i>
					<view>{{item.storeName}}</view>
				</view>
				<view v-for="product in item.products" :key="product.id" class="flex">
					<image :src="product.image"></image>
					<view class="flex column between start store-info">
						<view class="flex start">
							<!-- <view class="tag font20">自营</view> -->
							<view class="font28 fontbold-500">{{product.title}}</view>
						</view>
						<view class="flex font20 comment-num">评论{{product.comment_count}}条</view>
						<view class="flex between font20" style="width: 100%;">
							<view class="flex">
								<i class="iconfont icon-dingwei font20"></i>
								<view style="color: #666;">新宜加便利店 （万福广场店）</view>
							</view>
							<view class="flex" style="color: #999;">
								<i class="iconfont icon-jiantou font20" style="transform: rotate(180deg);"></i>
								<view>0.1km</view>
							</view>
						</view>
						<view class="flex start font20 qiang-box" style="width: 100%;">
							<image :src="IMAGE_URL + '/static/mine/miaoshabg.png'" style="width: 100%;height: 100%;">
							</image>
							<view class="flex between" style="width: 100%;">
								<view class="flex price">
									<text class="font28">￥</text>
									<text class="font36">{{product.price.split('.')[0]}}</text>
									<text class="font28">.{{product.price.split('.')[1]}}</text>
									<text class="font20">￥{{product.original_price}}</text>
								</view>
								<view class="font32 fontbold-500 qiang-txt">抢</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="list">
				<view class="flex start store-title font24">
					<i class="iconfont icon-store font24" style="height: 24rpx;"></i>
					<view>{{item.storeName}}</view>
				</view>
				<view v-for="product in item.products" :key="product.id" class="flex">
					<image :src="product.image"></image>
					<view class="flex column between start store-info">
						<view>
							<view class="flex start">
								<!-- <view class="tag font20">自营</view> -->
								<view class="font28 fontbold-500">{{product.title}}</view>
							</view>
							<view class="sale-num font24">已售{{product.sale_count}}</view>
						</view>
						<view class="flex between font20 num">
							<view class="flex price">
								<text class="font28">￥</text>
								<text class="font36">{{product.price.split('.')[0]}}</text>
								<text class="font28">.{{product.price.split('.')[1]}}</text>
							</view>
							<view class="flex">
								<view class="flex">
									<i class="iconfont icon-like font28"></i>
									{{product.good_comment_count / product.comment_count * 100}}%
								</view>
								<view class="flex">
									<i class="iconfont icon-comment font28"></i>
									{{product.comment_count}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template></scroll-view>
</template>
<script>
	import appConfig from '@/config/app.js'
	import request from '../../../utils/request'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					page: 1,
					limit: 10
				},
				list: [],
				isPage: false
			}
		},
		props: {
			type: String, // 1正常， 2团购， 3秒杀
			info: Object
		},
		components: {},
		mounted() {
			this.init()
		},
		methods: {
			page() {
				if (this.isPage) return
				this.params.page = this.params.page + 1
			},
			goPage() {
				uni.navigateTo({
					url: this.info.confirmUrl
				});
			},
			async init() {
				const res = await request.get(this.info.query, this.params);
				console.log(res.data.data)
				this.list = res.data.data || res.data
				this.isPage = res.data.data.length < this.params.limit
			}
		}
	}
</script>
<style scoped lang="scss">
	.scroll {
		height: calc(100vh - 130rpx);
	}

	.list {
		margin: 28rpx 32rpx 0;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		background: $uni-bg-color;

		.store-title {
			border-bottom: 1rpx solid #DDDDDD;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		.time-red-box {
			width: 30rpx;
			height: 30rpx;
			background: linear-gradient(155deg, #F54F4F 0%, #F07474 100%);
			border-radius: 6rpx;
			color: $uni-text-color-inverse;
			margin: 0 8rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;

			.font20 {
				text-decoration: line-through;
				color: #999999;
			}
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 20rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.progress {
			height: 56rpx;
			border-radius: 8rpx 16rpx 16rpx 8rpx;
			padding: 20rpx 16rpx;
			box-sizing: border-box;
			color: #FF4141;
			z-index: 1;

			.progress-bottom {
				background: $uni-bg-color;
				height: 16rpx;
				border-radius: 20rpx;
				width: 220rpx;
				margin-right: 12rpx;
			}

			.progress-active {
				background: linear-gradient(90deg, #FF6E6E 0%, #FF4141 100%);
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.qiang-box {
			position: relative;

			image {
				width: 100%;
				position: absolute;
				z-index: 0;
				height: 100%;
			}

			.price {
				z-index: 1;
				background: none;
				margin-left: 4rpx;
			}

			.qiang-txt {
				color: #fff;
				z-index: 1;
				width: 32rpx;
				margin-right: 28rpx;
			}
		}

		.comment-num {
			width: 134rpx;
			height: 40rpx;
			background: #FFF9F0;
			border-radius: 60rpx;
			color: #999999;
		}

		.icon-dingwei {
			color: #DF9824;
			margin-right: 4rpx;
		}

		.icon-jiantou {
			margin-right: 4rpx;
		}
	}
</style>